The Web In Motion: Practical Considerations For Designing With Animation (Smashing eBooks) by Smashing Magazine

Author:Smashing Magazine [Magazine, Smashing]
Language: eng
Format: epub
Tags: Smashing eBooks
Publisher: Smashing Magazine GmbH
Published: 2015-02-25T05:00:00+00:00

animation: [animation name (from keyframe block)] [duration] [timing function] [delay] [number of times the animation repeats] [animation direction] [fill mode]

→ Here’s a more thorough explanation of all the different CSS animation properties11.

The second thing going on is the keyframes block. At a very basic level, this is self explanatory. Set any number of percentages from 0–100 to represent how far through the animation we are from start (0%) to finish (100%). Then add any styles for that stage of the animation. When the animation runs, all styles will animate between the values you specify at each percentage number.

Again, not all properties animate, but as time goes on, we’ll be able to do more and more.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.